<template>
  <div class="body_right bCFF mLeft16" v-if="phoneIndex == 0">
    <div class="body_left_header items">
      <div class="mLeft6 c33">Параметры безопасности</div>
    </div>
    <div class="mTop30 account">
      <div class="account_name">
        <div class="title c33">Номер мобильного телефона</div>
        <div class="items mTop20">
          <div class="account_name_input_1 line-1" :style="{ color: !baseInfo.phone ? '#F83C57' : '' }">{{ baseInfo.phone
            || 'Пока не привязаны' }}</div>
          <img class="account_name_img mLeft20" src="/src/assets/icons/account/edit_icon.png" @click="onEditPhone"
            alt="">
        </div>
      </div>
    </div>
    <div class="mTop30 account">
      <div class="account_name">
        <div class="title c33">Электронная почта</div>
        <div class="items mTop20">
          <div class="account_name_input_1 line-1" :style="{ color: !baseInfo.email ? '#F83C57' : '' }">{{ baseInfo.email
            || 'Пока не привязаны' }}</div>
          <img class="account_name_img mLeft20" src="/src/assets/icons/account/edit_icon.png" @click="onEditEmail"
            alt="">
        </div>
      </div>
    </div>
    <div class="mTop30 account">
      <div class="account_name">
        <div class="title c33">Изменить пароль</div>
        <div class="items mTop20">
          <div class="account_name_input_1 line-1">********</div>
          <img class="account_name_img mLeft20" src="/src/assets/icons/account/edit_icon.png" @click="onEditPassword"
            alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="body_right bCFF mLeft16" v-if="phoneIndex == 1">
    <div class="body_left_header items">
      <div class="mLeft6 c33">Параметры безопасности</div>
    </div>
    <div style="" class="cFF8 tag items mTop10" v-if="emailFlag != null && !emailFlag">Если
      оригинальный номер телефона
      отключен, вы можете использовать
      связанный электронный ящик для аутентификации</div>
    <!-- 手机号 -->
    <div class="mTop30 account" v-if="oldFlag != null">
      <div class="account_name">
        <div class="title c33">{{ oldFlag ? 'Оригинальный номер телефона' : 'Новый номертелефона' }}</div>
        <div class="items mTop20">
          <el-input v-model="phoneInput" style="" class=" account_name_input_2"
            placeholder="Введите вопрос, который вы хотите проконсультировать" />
        </div>
      </div>
    </div>
    <!-- 邮箱 -->
    <div class="mTop30 account" v-if="oldFlag == null">
      <div class="account_name">
        <div class="title c33">Электронная почта</div>
        <div class="items mTop20">
          <el-input v-model="emailInput" style="" class=" account_name_input_2"
            placeholder="Введите вопрос, который вы хотите проконсультировать" />
        </div>
      </div>
    </div>
    <!-- 验证码 -->
    <div class="mTop30 account">
      <div class="account_name">
        <div class="title c33">Код проверки</div>
        <div class="items mTop20" style="border: 1px solid #EEEEEE;width: 520px;">
          <el-input v-model="vaildCodeInput" class="account_name_input_3" placeholder="Введите код проверки" />
          <div style="" class="account_name_tip c2C">
            Получение кода проверки
          </div>
        </div>
      </div>
      <div class="account_tip mTop12" v-if="oldFlag != null && oldFlag" @click="gotoCode">
        Первоначальный номер телефона отключен?
      </div>
      <div class="account_tip mTop12" v-if="emailFlag != null && !emailFlag">
        Код проверки истек
      </div>
    </div>
    <!-- 按钮 -->
    <div class="account_next center cFF mTop40" v-if="formType == 0 && oldFlag != null" @click="oldFlag = !oldFlag,onSubmit()">
      {{ oldFlag ? 'Следующий шаг' : 'Определение' }}</div>
    <div class="account_next center cFF mTop40" v-if="formType == 1 && emailFlag != null" @click="emailFlag = !emailFlag,onSubmit()">
      {{ emailFlag ? 'Следующий шаг' : 'Определение' }}</div>
  </div>
  <div class="body_right bCFF mLeft16" v-if="phoneIndex == 2">
    <div class="body_left_header items">
      <div class="mLeft6 c33">Параметры безопасности</div>
    </div>
    <div v-if="passwordList.length != 0" class="mTop30 account" v-for="item in passwordList">
      <div class="account_name">
        <div class="title c33">{{ item.title }}</div>
        <div class="items mTop20">
          <el-input v-model="item.value" :type="item.flag ? 'text' : 'password'" class=" account_name_input_4"
            placeholder="Введите вопрос, который вы хотите проконсультировать" />
          <img v-if="item.img" class="account_name_img mLeft20 p" @click="changeInput(item)"
            :src="item.flag ? '/src/assets/icons/account/see.png' : '/src/assets/icons/account/noSee.png'" alt="">
        </div>
      </div>
    </div>
    <!-- 手机号 -->
    <div v-if="passwordList.length == 0" class="mTop30 account">
      <div class="account_name">
        <div class="title c33">{{ oldFlag ? 'Оригинальный номер телефона' : 'Новый номертелефона' }}</div>
        <div class="items mTop20">
          <el-input v-model="phoneInput" style="" class=" account_name_input_2"
            placeholder="Введите вопрос, который вы хотите проконсультировать" />
        </div>
      </div>
    </div>
    <!-- 验证码 -->
    <div v-if="passwordList.length == 0" class="mTop30 account">
      <div class="account_name">
        <div class="title c33">Личное прозвище</div>
        <div class="items mTop20" style="border: 1px solid #EEEEEE;width: 520px;">
          <el-input v-model="vaildCodeInput" class="account_name_input_3" placeholder="Введите код проверки" />
          <div style="" class="account_name_tip c2C">
            Получение кода проверки
          </div>
        </div>
      </div>
    </div>
    <div class="account_tip mTop12 p" v-if="passwordList.length != 0" @click="onForgetPwd">
      Забыли пароль?
    </div>
    <div class="account_next center cFF mTop40" @click="nextTap">
      Определение
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import useUserStore from '@/store/modules/user'
import { changePasswordByMobile, changePasswordByPassword } from '@/api/api'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()

const baseInfo = ref({
  phone: userStore.userInfo.mobile,
  email: userStore.userInfo.email
})

const phoneInput = ref('')
const emailInput = ref('')
const vaildCodeInput = ref('')
// 0=修改手机号,1=修改绑定邮箱,2=修改密码,3=忘记密码
const formType = ref(0)

// 修改密码表单项
interface PasswordFormItem {
  title: string,
  formKey: string,
  value: string,
  flag: boolean,
  placeholder: string,
  img: boolean
}

const passwordList = ref<PasswordFormItem[]>([])

const phoneIndex = ref(0)
//修改手机号 是否是新手机号
let oldFlag = ref<boolean | null>(false)
let emailFlag = ref<boolean | null>(null)


const gotoCode = () => {
  oldFlag.value = false
  emailFlag.value = false
}

const changeInput = (item: any) => {
  item.flag = !item.flag;
}

const onForgetPwd = () => {
  formType.value = 3
  passwordList.value = []
}

const nextTap = () => {
  if (passwordList.value.length == 0) { // 手机号验证，下一步
    passwordList.value = [
      {
        title: 'Введите новый пароль',
        formKey: 'newPassword',
        value: '',
        flag: false,
        placeholder: '',
        img: false
      },
      {
        title: 'Второй ввод нового пароля',
        formKey: 'reNewPassword',
        value: '',
        flag: false,
        placeholder: '',
        img: false
      }
    ]
    return
  } else if (passwordList.value.length == 2 ) { // 验证码方式修改密码
    const data = {} as Record<string, string>
    passwordList.value.forEach((item: any) => {
      data[item.formKey] = item.value
    })
    changePasswordByMobile(data).then((res: any) => {
      if (res.code == 0) {
        resetPasswordList()
      } else {
        ElMessage.error('Изменения не сохранены!')
      }
    })
  } else if (passwordList.value.length == 3) { // 旧密码方式修改密码
    const data = {} as Record<string, string>
    passwordList.value.forEach((item: any) => {
      data[item.formKey] = item.value
    })
    changePasswordByPassword(data).then((res: any) => {
      if (res.code == 0) {
        resetPasswordList()
      } else {
        ElMessage.error('Изменения не сохранены!')
      }
    })
  }
}

/**
 * 重置修改密码
 */
const resetPasswordList = () => {
  passwordList.value = [
    {
      title: 'Введите старый пароль',
      formKey: 'oldPassword',
      value: '',
      flag: true,
      placeholder: '',
      img: true
    },
    {
      title: 'Введите новый пароль',
      formKey: 'newPassword',
      value: '',
      flag: false,
      placeholder: '',
      img: true
    },
    {
      title: 'Второй ввод нового пароля',
      formKey: 'reNewPassword',
      value: '',
      flag: false,
      placeholder: '',
      img: true
    }
  ]
  phoneIndex.value = 0
}

const onEditPhone = () => {
  phoneIndex.value = 1
  oldFlag.value = true
  formType.value = 0
}

const onEditEmail = () => {
  phoneIndex.value = 1
  oldFlag.value = null
  emailFlag.value = true
  formType.value = 1
}

const onEditPassword = () => {
  resetPasswordList()
  phoneIndex.value = 2
  formType.value = 3
}

/**
 * 提交修改
 */
const onSubmit = () => {

}
</script>
<style lang="less" scoped>
.body {
  width: 1400px;

  &_right {
    width: 1124px;
    height: 951px;
    border-radius: 16px;
    padding: 20px;

    &_header {
      font-size: 16px;
      line-height: 16px;
      border-bottom: 1px solid #EEEEEE;
      padding-bottom: 12px;
    }

    ::v-deep .el-input__inner {
      height: 48px;

    }

    .tag {
      background: #FFF6EF;
      font-size: 14px;
      font-weight: 400;
      line-height: 14px;
      padding: 8px;
    }

    .account {
      .title {
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
      }

      &_name {
        &_input {
          width: 580px;
        }

        &_input_1 {
          width: 360px;
          height: 48px;
          align-items: center;
          background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
          background-image: none;
          border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
          box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
          cursor: text;
          display: inline-flex;
          padding: 1px 11px;
          transition: var(--el-transition-box-shadow);
        }

        &_input_2 {
          width: 520px;
        }

        &_input_3 {
          width: 229px;

          ::v-deep .el-input__wrapper {
            box-shadow: none;
          }
        }

        &_input_4 {
          width: 360px;
        }

        &_tip {
          width: 221px;
          font-size: 16px;
          font-weight: 400;
          line-height: 16px;
        }

        &_img {
          width: 24px;
          height: 24px;
        }
      }

      &_tip {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 14px;
        color: #FF2E2E;
      }

      &_next {
        width: 164px;
        height: 48px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
        background: #0070E9;
        cursor: pointer;

        &:hover {
          background: #2989f0;
        }

        &:active {
          background: #4b9cf3;
        }
      }

      &_sex {
        &_title {
          font-family: PingFang SC;
          font-size: 16px;
          font-weight: 400;
          line-height: 16px;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;
        }
      }

      &_url {
        img {
          width: 64px;
          height: 64px;
          border-radius: 50%;
        }
      }

      &_submit {
        width: 122px;
        height: 48px;
        border-radius: 8px;
        background: #0070E9;
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
      }
    }
  }

  .p {
    cursor: pointer;
  }
}
</style>